import { FC } from "react"
type Iprops = {
    data: Idata,
    delTodo:(id:string) => void
}
const TodoList: FC<Iprops> = (props) => {
    console.log(props);

    //解构props中的数据
    let { data,delTodo } = props

    return (
        <fieldset>
            <legend>列表组件</legend>
            <ul>
                {
                    data.map(item => {
                        return (
                            <li key={item.id} >
                                <input type="checkbox" name='' id="" />
                                <b>{item.todo}</b>
                                <button onClick={() => {
                                    delTodo(item.id)
                                }}>删除</button>
                            </li>
                        )
                    })
                }
            </ul>

            <div className="buttons">
                <button>全部</button>
                <button>已完成</button>
                <button>未完成</button>
            </div>
        </fieldset>
    )
}

export default TodoList